<!--
 @description 饼状图公共组件
 @fileName PieChart.vue
 @author maliang
 @created 2021/12/06 14:47:00
-->
<template>
  <div>
    <div :id="chartId" ref="myEchart" class="echart_container" />
  </div>
</template>

<script>
import { v4 as uuidv4 } from 'uuid'
export default {
  name: 'PieChart',
  props: {
    seriesData: {
      type: Array,
      default: () => {
        return null
      }
    }
  },
  data() {
    // const _this = this
    return {
      windowSize: [0, 0],
      chartId: `echart-bar-${uuidv4()}`, // 用UUID生成图表id，防止id重复
      chart: { map: null, chartData: [] },
      echartOption: {
        title: {
          text: '饼-圆角环形图',
          show: false
        }, // 标题
        tooltip: {
          trigger: 'item',
          textStyle: {
            color: '#333333',
            fontFamily: 'PFZH',
            fontSize: 12,
            lineHeight: 26
          },
          extraCssText: 'z-index: 9' // 设置层级
        }, // 提示框，鼠标悬浮交互时的信息提示
        legend: {
          // show: false,
          // orient: "vertical",
          x: 'left',
          data: [],
          show: true,
          orient: 'vertical',
          right: 0,
          top: 10,
          bottom: 20,
          lineStyle: {
            opacity: 0
          },
          textStyle: {
            color: '#888888',
            fontFamily: 'PFZH'
          }
        }, // 图例属性，以饼状图为例，用来说明饼状图每个扇区，data与下边series中data相匹配
        series: [
          {
            name: '产量占比',
            type: 'pie',
            radius: ['30%', '60%'],
            center: ['68%', '40%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 1,
              borderColor: '#fff',
              borderWidth: 1
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold',
                fontFamily: 'PFZH'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              // { value: 50, name: "50%-学生" },
              // { value: 25, name: "25%-老师" },
              // { value: 25, name: "25%-家长" },
            ], // 数据，数据中其他属性，查阅文档
            color: [
              '#16BC83',
              '#FEB81D',
              '#FF8A8A',
              '#4FD8D3',
              '#73A0FA',
              '#5FBCFF',
              '#909399',
              '#906299',
              '#905311',
              '#908006'
            ] // 各个区域颜色
          }
        ] // 系列列表
      },
      initChartFinish: false // 图表初始化是否完成
    }
  },
  computed: {
    // 是否开始绘制地图（监听数据获取完成、图表初始化完成后绘制地图）
    isStartDrawChart() {
      if (this.seriesData && this.initChartFinish) {
        return true
      }
      return false
    }
  },
  watch: {
    windowSize() {
      this.chart.map.resize()
    },
    isStartDrawChart: {
      handler(val) {
        if (val) {
          this.drawChart()
        } else {
          this.chart.map.clear()
          this.showLoading()
        }
      }
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    showLoading() {
      this.chart.map.showLoading({
        color: '#12B9A3',
        fontFamily: 'PFZH',
        textColor: '#CCCCCC',
        fontSize: 14,
        lineWidth: 2
      }) // loading样式
    },
    hideLoading() {
      this.chart.map.hideLoading() // 隐藏loading样式
    },
    initChart() {
      this.windowSize = [
        document.body.clientWidth,
        document.body.clientHeight
      ]
      window.addEventListener('resize', () => {
        this.windowSize = [
          document.body.clientWidth,
          document.body.clientHeight
        ]
      })
      this.chart.map = this.$echarts.init(
        document.getElementById(this.chartId)
      )
      this.showLoading()
      this.initChartFinish = true
    },
    async drawChart() {
      this.chart.map.clear()
      this.echartOption.legend.data = []
      this.echartOption.series[0].data = []
      this.seriesData.forEach((item, index) => {
        this.echartOption.legend.data.push(item.name)
        this.echartOption.series[0].data.push(item)
      })
      this.hideLoading()
      this.chart.map.setOption(this.echartOption)
      this.chart.map.on('legendselectchanged', (params) => {
        Object.keys(params.selected).forEach((key, index) => {
          if (!params.selected[key]) {
            this.chart.map.dispatchAction({
              type: 'legendSelect',
              // 图例名称
              name: key
            })
            setTimeout(() => {
              this.chart.map.dispatchAction({
                type: 'showTip', // 提示框
                seriesIndex: 0,
                dataIndex: index
              })
            }, 300)
          }
        })
      })
      this.$nextTick(() => {
        setTimeout(() => {
          this.chart.map.resize()
        }, 300)
      })
    }
  }
}
</script>
<style lang="less" scoped>
.echart_container {
    height: 280px;
}
</style>
